<template>
    <div class="userPage">
        <header>管理员列表</header>
        <el-main class="main">
            <el-button type="primary" icon="el-icon-plus" @click="addUser">新增用户</el-button>
            <el-table
                class="table"
                :data="tableData"
                height="85%"
                v-loading="loading"
                style="width: 100%; margin-top: 15px"
            >
                <el-table-column prop="id" label="id" width="70"></el-table-column>
                <el-table-column prop="username" label="用户名称" width="auto"></el-table-column>
                <el-table-column prop="uid" label="用户组" width="180"></el-table-column>
                <el-table-column prop="email" label="email" width="180"></el-table-column>
                <el-table-column prop="additor" label="添加人" width="180"></el-table-column>
                <el-table-column prop="addtime" label="添加时间" width="180"></el-table-column>
                <el-table-column prop="address" width="180" label="操作">
                    <template slot-scope="scope">
                        <span class="btn">
                            <el-button size="mini" @click="editUser(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="delUser(scope.row)">删除</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pageAtion"
                @current-change="handleCurrentChange"
                :current-page.sync="pageNo"
                :page-size="10"
                layout="prev, pager, next"
                background
                :total="total"
            ></el-pagination>
        </el-main>
        <el-dialog :title="headTit" :visible.sync="dialogVisible" width="45%">
            <el-form class="form" :model="form" :rules="rules" ref="form">
                <el-form-item prop="userGroup" label="用户组：">
                    <el-select v-model="form.userGroup" placeholder="请选择" @change="changeGroup">
                        <el-option
                            v-for="item in userGrounpList"
                            :key="item.id"
                            :label="item.user_group_name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="email" label="输入域名：" v-show="selectDomain">
                    <el-input v-model="form.domain" placeholder="请输入域名"></el-input>
                </el-form-item>
                <el-form-item prop="username" label="用户名：">
                    <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱：" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱/email"></el-input>
                </el-form-item>
                <el-form-item label="用户密码：" prop="pass">
                    <el-input v-model="form.pass" placeholder="请输入密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码：" prop="checkPass">
                    <el-input v-model="form.checkPass" placeholder="请确认密码" type="password"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form')">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Service from "../../services/main";
export default {
    name: "User",
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.form.checkPass !== "") {
                    this.$refs.form.validateField("checkPass");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.form.pass) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            rules: {
                userGroup: [
                    { required: false, message: "请选择账号", trigger: "blur" }
                ],
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" }
                ],
                username1: [
                    { required: false, message: "请输入域名", trigger: "blur" }
                ],
                pass: [{ validator: validatePass, trigger: "blur" }],
                checkPass: [{ validator: validatePass2, trigger: "blur" }]
            },
            loading: false,
            headTit: "新增用户",
            dialogVisible: false,
            id: "",
            isEdit: false,
            tableData: [],
            page: 1,
            pageNo: 1,
            total: 20,
            selectDomain: false,
            userGrounpList: [],
            form: {
                userGroup: "",
                username: "",
                email: "",
                checkPass: "",
                pass: "",
                domain: ""
            }
        };
    },
    computed: {},
    watch: {
        dialogVisible(val) {
            if (val) {
                let params = {
                    type: 2
                };
                Service.getUserGroup(this, params).then(res => {
                    this.userGrounpList = res.result;
                    if (!this.isEdit) {
                        this.form.userGroup = res.result[0].id;
                    }
                });
            }
            if (!val) {
                this.form.domain = "";
                this.selectDomain = false;
            }
        }
    },
    created() {
        this.getUserList();
    },
    methods: {
        // 获取用户列表
        getUserList() {
            let params = {
                page: this.page
            };
            this.loading = true;
            Service.getUserList(this, params).then(res => {
                this.loading = false;
                this.tableData = res.result.list;
                this.total = res.result.total;
            });
        },
        // handleCurrentChange 分页
        handleCurrentChange(val) {
            this.page = val;
            this.getUserList();
        },
        // 新增用户
        addUser() {
            this.form.userGroup = "";
            this.form.username = "";
            this.form.email = "";
            this.form.pass = "";
            this.form.checkPass = "";
            this.dialogVisible = true;
            this.headTit = "新增用户";
        },
        // 编辑用户
        editUser(val) {
            this.headTit = "编辑用户";
            this.dialogVisible = true;
            this.form.userGroup = val.uid;
            this.selectDomain = val.uid === "操盘手" ? true : false;
            this.form.domain = val.domain;
            this.form.username = val.username;
            this.form.email = val.email;
            this.form.pass = val.password;
            this.form.checkPass = val.password;
            this.isEdit = true;
            this.id = val.id;
        },
        // 删除用户
        delUser(val) {
            this.$confirm("此操作将永久删除，是否继续？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let params = {
                        id: val.id
                    };
                    Service.userDel(this, params).then(() => {
                        this.getUserList();
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });
                    });
                })
                .catch(() => {});
        },
        // 新增用户提交表单
        submitForm(formName) {
            this.$refs[formName].validate(vaild => {
                let params = {
                    uid: this.form.userGroup,
                    username: this.form.username,
                    email: this.form.email,
                    password: this.form.pass,
                    domain: this.selectDomain ? this.form.domain : ""
                };
                if (vaild) {
                    if (!this.isEdit) {
                        Service.addUser(this, params).then(res => {
                            if (res.errorCode === 0) {
                                this.$notify({
                                    title: "提示",
                                    message: "新增成功！",
                                    type: "success"
                                });
                                this.dialogVisible = false;
                                this.form.userGroup = "";
                                this.form.pass = "";
                                this.form.email = "";
                                this.form.username = "";
                                this.$refs[formName].resetFields();
                                this.selectDomain = false;
                                this.getUserList();
                            } else if (res.errorCode === 1010) {
                                this.$notify({
                                    title: "提示",
                                    message: res.errorMsg,
                                    type: "warning"
                                });
                            } else if (res.errorCode === 1011) {
                                this.$notify({
                                    title: "提示",
                                    message: res.errorMsg,
                                    type: "warning"
                                });
                            }
                        });
                    } else {
                        const param = {
                            ...params,
                            id: this.id
                        };
                        Service.userEdit(this, param).then(res => {
                            this.$notify({
                                title: "提示",
                                message: res.errorMsg,
                                type: "success"
                            });
                            this.dialogVisible = false;
                            this.form.userGroup = "";
                            this.form.pass = "";
                            this.form.email = "";
                            this.form.username = "";
                            this.$refs[formName].resetFields();
                            this.getUserList();
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
            this.form.domain = "";
        },
        changeGroup(val) {
            let str = this.userGrounpList.filter(item => {
                return val === item.id;
            });
            if (str[0].user_group_name === "操盘手") {
                this.selectDomain = true;
            } else {
                this.selectDomain = false;
                this.form.domain = "";
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.userPage {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
}
header {
    height: 50px;
    font-size: 24px;
    color: #666;
}
.main {
    flex: auto;
    overflow: hidden;
    height: 100%;
}
.main .btn {
    display: flex;
}
.main .table {
    height: 85%;
    overflow: auto;
}
.pageAtion {
    float: right;
}
.form {
    width: 80%;
    height: 350px;
    margin: 0 auto;
}
.el-select,
.el-input {
    width: 80%;
}
</style>
